<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Modal</title>
    <link rel="stylesheet" href="css/jquery.dialog.css" type="text/css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.dialog.js"></script>
    <style type="text/css">
        body {
            width: 600px;
            margin: 20px auto;
        }

        button {
            font-family: Segoe UI, serif;
            font-size: 15px;
            color: #fff;
            background: #418261;
            padding: 6px 50px;
            border: 1px solid #57ae82;
            cursor: pointer;
        }

        button:hover {
            background: #68cb99;
        }

        #log {
            border: 1px solid #ccc;
            margin: 20px 0 0 0;
        }

        #log p {
            margin: 0;
            padding: 5px 10px;
        }

        hr {
            border: none;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
<button id="handler">Click me</button>
<div id="log">

</div>

<script type="text/javascript">
    var $log = $('#log');
    function addLog(text) {
        $log.append($('<p></p>').text(text));
    }

    function addBreak() {
        $log.append('<hr>');
    }

    $('#handler').click(function() {
        $.Dialog.show({
            content: 'Testing jDialog',
            confirm: true,
            loading: true,
            on_close: function() {
                addLog('close dialog');
                addBreak();
            },
            on_confirm: function() {
                addLog('confirm clicked');
            },
            on_cancel: function() {
                addLog('cancel clicked');
            }
        });
    });
</script>
</body>
</html>